<template>
  <div class="page-content">
    <table-bar :showTop="false" @search="search" @reset="resetForm(searchFormRef)" layout="search refresh"></table-bar>
    <art-table :data="tableData" selection show-header-background :total="total" @rowClick="handleRowClick">
      <el-table-column
        width="120"
        show-overflow-tooltip
        :fixed="field.name === 'name' ? 'left' : false"
        v-for="field in fieldList"
        :label="field.title"
        #default="{row}">
        <span>{{formatField(field,row)}}</span>
      </el-table-column>
      <el-table-column label="第三方ID" prop="third_id" width="100"/>
      <el-table-column label="昵称" prop="nickname" />
      <el-table-column label="头像" prop="avatar" #default="{ row }">
        <div @click.stop>
          <el-image
            style="width: 50px;"
            :src="row.avatar"
            :preview-src-list="[row.avatar]"
            preview-teleported
            fit="cover"
            hide-on-click-modal/>
        </div>
      </el-table-column>
      <el-table-column label="是否开口" prop="is_reply" #default="{ row }" width="100">
        <el-tag :type="row.is_reply === 1 ? 'primary': 'info'">{{row.is_reply === 1 ? '是' : '否'}}</el-tag>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150px" #default="scope">
        <div @click.stop>
<!--          <button-table type="edit" @click="showDialog('edit', scope.row)" />-->
          <button-table type="delete" @click="deleteAttr(scope.row)" />
        </div>
      </el-table-column>
    </art-table>
    <Drawer v-model="show" v-if="show" :data="cusData" @close="handleClose"/>
  </div>
</template>

<script setup lang="ts">
  import { ElMessageBox, ElMessage } from 'element-plus'
  import type { FormRules, FormInstance } from 'element-plus'
  import { FieldService } from '@/api/customer/fieldApi'
  import { CustomerService } from '@/api/customer/customerApi'
  import Drawer from './components/Drawer.vue'

  const formData = reactive({
    id: '',
    name: '',
    title: '',
    remark: '',
    type: '',
    is_show: 0,
    sort: ''
  })

  const cusData = ref({})
  const show = ref(false)

  const queryForm = reactive({
    page: 1,
    limit: 10,
    is_reply: 0 // 是否开口
  })

  const tableData = ref([])
  const total = ref(0)

  //
  function formatField(field,row) {
    let text = ''
    row.fields.forEach(item => {
      if(item.name === field.name) {
        text = item.content
      }
    })
    return text
  }

  // 字段数据
  const fieldList = ref([])

  // 获取字段列表
  async function getFieldList() {
    const res = await FieldService.getFieldList()
    fieldList.value = res.data
  }

  getFieldList()
  getPage()
  // 获取顾客列表
  async function getPage() {
    const res = await CustomerService.getCustomerPage(queryForm)
    tableData.value = res.data.list
    total.value = res.data.total
  }

  // 行点击事件
  const handleRowClick = (data:any) => {
    console.log('data',data)
    cusData.value = data
    show.value = true
  }

  // 关闭回调
  const handleClose = ()=> {
    getPage()
  }

  const searchFormRef = ref<FormInstance>()

  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }

  // 显示切换
  const handleChange = async (row: any, e: any) => {
    row.is_show = e
    await FieldService.fieldUpdate(row)
  }
  // 删除属性
  const deleteAttr = (row: any) => {
    ElMessageBox.confirm('确定要删除该属性吗？', '系统提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    }).then(async () => {
      await FieldService.fieldDelete({ id: row.id })
      await getPage()
      ElMessage.success('删除成功')
    })
  }

  const search = () => {}

  const formRef = ref<FormInstance>()
</script>
<style lang="scss" scoped>

</style>
